<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>Hexo Butterfly Algolia 搜索的使用 | CC的部落格</title><meta name="author" content="CC康纳百川"><meta name="copyright" content="CC康纳百川"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><article data-clarity-region="article"></article><meta name="description" content="本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用"><meta property="og:type" content="article"><meta property="og:title" content="Hexo Butterfly Algolia 搜索的使用"><meta property="og:url" content="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/"><meta property="og:site_name" content="CC的部落格"><meta property="og:description" content="本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/c9dcd19b9621a425f914ffb64cf2f8c1_w1920_h1080_s281.jpg"><meta property="article:published_time" content="2021-05-11T03:00:00.000Z"><meta property="article:modified_time" content="2023-02-16T11:11:40.000Z"><meta property="article:author" content="CC康纳百川"><meta property="article:tag" content="工具"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/c9dcd19b9621a425f914ffb64cf2f8c1_w1920_h1080_s281.jpg"><link rel="shortcut icon" href="/favicon.ico"><link rel="canonical" href="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/"><link rel="preconnect" href="https://jsd.cdn.zzko.cn"><link rel="preconnect" href="//static.cloudflareinsights.com"><link rel="preconnect" href="//www.clarity.ms"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="preconnect" href="https://97MUPN4DMC-dsn.algolia.net" crossorigin=""><meta name="google-site-verification" content="tUkgeN6Ih2ArWtjw47oNSSl4Af2_MWjiKLrzZptUCdM"><meta name="msvalidate.01" content="71ADBCC80D679CEA8080BAFDCD54E368"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><script>(()=>{const t={set:(e,t,a)=>{var o;0!==a&&(o=Date.now(),localStorage.setItem(e,JSON.stringify({value:t,expiry:o+864e5*a})))},get:e=>{var t=localStorage.getItem(e);if(t){t=JSON.parse(t);if(!(Date.now()>t.expiry))return t.value;localStorage.removeItem(e)}}},a=(window.btf={saveToLocal:t,getScript:(o,n={})=>new Promise((t,e)=>{const a=document.createElement("script");a.src=o,a.async=!0,a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},Object.keys(n).forEach(e=>{a.setAttribute(e,n[e])}),document.head.appendChild(a)}),getCSS:(o,n=!1)=>new Promise((t,e)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=o,n&&(a.id=n),a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),addGlobalFn:(e,t,a=!1,o=window)=>{var n=o.globalFn||{},d=n[e]||{};a&&d[a]||(d[a=a||Object.keys(d).length]=t,n[e]=d,o.globalFn=n)}},()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")}),o=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","ffffff")};btf.activateDarkMode=a,btf.activateLightMode=o;var e=t.get("theme"),n=window.matchMedia("(prefers-color-scheme: dark)").matches,d=window.matchMedia("(prefers-color-scheme: light)").matches,r=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!n&&!d&&!r,n=(void 0===e?(d?o():n?a():(r||c)&&((d=(new Date).getHours())<=6||18<=d?a:o)(),window.matchMedia("(prefers-color-scheme: dark)").addListener(e=>{void 0===t.get("theme")&&(e.matches?a:o)()})):("light"===e?o:a)(),t.get("aside-status"));void 0!==n&&("hide"===n?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})()</script><script defer data-pjax="data-pjax" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;35785b58f09f472ebfd7a2854973e6b8&quot;}"></script><script>!function(t,e,n,a,c,r){t[n]=t[n]||function(){(t[n].q=t[n].q||[]).push(arguments)},(c=e.createElement(a)).async=1,c.src="https://www.clarity.ms/tag/an4gdfm6a9",(r=e.getElementsByTagName(a)[0]).parentNode.insertBefore(c,r)}(window,document,"clarity","script")</script><script>const GLOBAL_CONFIG={postHeadAiDescription:{enable:!0,gptName:"CC",mode:"tianli",switchBtn:!0,btnLink:"https://tianli-blog.club/tianligpt/",randomNum:3,basicWordCount:1e3,key:"VCtoijR43E2uiVWkrZiC",Referer:"https://blog.ccknbc.cc/"},root:"/",algolia:void 0,localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简"},noticeOutdate:{limitDay:15,position:"top",messagePrev:"本文最后一次更新为",messageNext:"天前，文章中的某些内容可能已过时！"},highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1,highlightFullpage:!0,highlightMacStyle:!0},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",dateSuffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:100,languages:{author:"作者: CC康纳百川",link:"链接: ",source:"来源: CC的部落格",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体中文",cht_to_chs:"你已切换为简体中文",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#49b1f5",bgDark:"#1f1f1f",position:"top-center"},infinitegrid:{js:"https://jsd.cdn.zzko.cn/npm/@egjs/infinitegrid/dist/infinitegrid.min.js",buttonText:"加载更多"},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,percent:{toc:!0,rightside:!0},autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={postAI:"本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用",pageFillDescription:"注册账号, 安装插件, 配置示例, 使用命令, 可选配置, Algolia 配置, JS 修改, 主题 4.0.0 以下版本, 主题 4.0.0 以上版本, 效果预览, 特别说明本文介绍了主题下搜索的使用本文首发在语雀自动同步更新至的部落格注册账号前往官网注册一个账号新建应用和数据中心建议选择新加坡或香港当然根据你自己情况而定安装插件分别是和他们的介绍分别为也就很明显了如果你想要全站搜索可选择前者如果你只想搜索文章两者兼可但前者不能将文章内容作为索引上传其实老版本是支持的但因为索引大小限制在新版本取消索引了文章内容后者目前仍可全文上传然后就是配置文件中添加以下内容下文基本以为例因为我个人认为访客只会搜文章吧事实上是搜索根本没人用毕竟也根本没人访问可查看官方文档注意配置和命令的区别为了保险识别到插件还可以加入以下内容去主题配置文件打开搜索记得关闭本地搜索二者只能取其一然后来看以下具体的参数配置获取方式可在页面获取注意保管好你的不要让其他人知道不建议直接写在配置中对于系统如果你不想每次都进行设定变量操作可以添加到系统的环境变量中而插件环境变量名称为注意根据对应的文档更改当然也可以使用命令行工具微软的建议不用正经人不用如果你和我一样使用的自动部署例如你可以在工作流中一开始或者对应的步骤添加环境变量记得中也要添加哦或者使用即你开始新建的索引名称其他内容保持默认即可但对于配置示例这里选择不截取上传全文并且删除标签只留下有用的搜索内容但对于博客来说没人会按照或者来搜索吧所以有些内容不必要上传并如果你和我一样有多个镜像站在不改源码的情况下不会使用而使用改源码可以使用但没必要并且只留下必要的内容如下所示这样有了标题全文内容路径即可在不同镜像站找到对应的页面而不是跳到主站当然你选择跳到主站无可厚非使用命令而在这之前还需要生成文件所以具体使用命令就是或者在未安装的情况下使用以下命令可选配置是否删除之前建立好的索引重新建立索引或者注意查看命令行输出信息然后去官网检查索引是否生成事实上到这里已经可以获得下图所示的搜索效果这是冰老师博客的效果它使用的是毕竟有关于我界面配置这里不细节讲你可以查阅官方文档虽然有些过时的参数但结合还是勉强能用蝴蝶已经做好了高亮标题虽然会查询文章内容但并不会高亮文章内容节选我们要做的就是修改部分内容并对应的设置好以便按照我们要求的优先顺序展示搜索结果而不是默认的很奇怪的排序毕竟针对中文分词他是一个一个分不能按照英语那样针对英文我们可以开启分词查询驼峰查找而不是盲目的匹配整个单词并且允许拼错字母或汉字的情况存在这些都是一个搜索系统要考虑的问题然后针对搜索速度我们可以对文章内容进行切片或者属性的刻画但所支持的功能实在太少派的上用场的大概就是匹配的字词内容匹配度匹配内容的摘录默认个字词还有高级搜索用法的启用修改主题以下版本到这里还没有结束如果你这样操作就会有一个问题假设你的访问流量很大有很多人用搜索功能那么免费的万次搜索额度可能不够一个月的使用需要按下键再执行搜索而不是实时搜索因此可以稍作修改的部分内容不想动源码的可以保存到其他与主题不冲突的路径然后更换地址即可主要修改以下内容然后就是排版问题改了改位置不喜欢的可以不改很直白就不用过多解释了这样就可获得和本博客一样的搜索效果了匹配字词匹配等级主题以上版本已经升级到版本那么一些特性就可以使用了修改内容其实差不多只是建议对于第行的页数限制主要是为了手机上排版美观不会转到下一行但是这样会有一个问题如果结果超过页那么将无法显示最后一页代表第页所以我个人会选择删掉这个参数限制同时合并删除了部分代码以及使用的组件而不是官方的代码解决方案另外因为新版官方的每次访问网站都会有一次全局请求这在消耗免费额度的同时也影响网站加载的速度所以修改默认行为为按下回车后再请求同样的部分参数发生了改变可以自行比对或查看官方文档也可以直接引用我的特别提一嘴官方切片方式对我来说个字太长了所以如果可以接受就用官方的不用做其他更改但想要和我的显示方式一样就注意配置好切片默认是个词符毕竟有现成的切片高亮处理可以用就没必要再来一次了另外新版浏览器支持搜索并定位高亮处理所以对跳转链接也做了处理算是弥补了一点不能精准定位的缺陷比如点击如下链接它会跳转到搜索结果对应的位置至于前后匹配多少字符你们自行修改但也是处于不太好用的状态毕竟是分片还是有点奇怪对英文来说应该是单词识别只是中文恰巧是另一标准单字变成了词勿滥用表情符号和匹配字词匹配等级第一页最后一页上一页下一页效果预览这个是因为我修改了源码实际上也能通过修改实现但大多数人不会关心这些搜索小贴士对于中文它当作单字匹配允许拼写错误特别说明因两个月前已申请通过本博客已切换至不限搜索次数的同时也加入了开源计划但因为太香了虽然可玩性更好但我也只申请了月的额度虽然可以增加所以为了即时搜索我还是选择了白嫖而且设定为每天自动爬取的话省去了生成索引上传的这一步骤节省了自动部署的时间而且爬取到数据后前端我并非一定要使用方案用配合其他插件也不是不可以",title:"Hexo Butterfly Algolia 搜索的使用",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-02-16 19:11:40"}</script><script>"serviceWorker"in navigator&&(navigator.serviceWorker.register("/sw.js",{scope:"/"}).then(r=>{r.onupdatefound=()=>{const e=r.installing;e.onstatechange=()=>{"installed"===e.state&&(navigator.serviceWorker.controller?(void 0!==GLOBAL_CONFIG.Snackbar&&btf.snackbarShow("已刷新缓存，更新为最新内容"),navigator.serviceWorker.controller.postMessage({type:"skipWaiting"})):console.log("第一次注册Service Worker"))}}}),navigator.serviceWorker.addEventListener("message",e=>{e.data&&"refresh"===e.data.type&&(console.log("收到刷新页面请求，开始刷新页面"),window.location.reload())}))</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/assets/font-awesome-animation.min.css" media="defer" onload='this.media="all"'><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.css" media="defer" onload='this.media="all"'><meta name="generator" content="Hexo 7.2.0"><link rel="alternate" href="/atom.xml" title="CC的部落格" type="application/atom+xml"><link rel="alternate" href="/rss.xml" title="CC的部落格" type="application/rss+xml"></head><body><script>window.paceOptions={restartOnPushState:!1},btf.addGlobalFn("pjaxSend",()=>{Pace.restart()},"pace_restart")</script><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/gh/CodeByZach/pace/themes/green/pace-theme-flash.css"><script src="https://jsd.cdn.zzko.cn/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/logo.png" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/404.jpg"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">38</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">7</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div><hr class="custom-hr"><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/c9dcd19b9621a425f914ffb64cf2f8c1_w1920_h1080_s281.jpg)"><nav id="nav"><span id="blog-info"><a href="/" title="CC的部落格"><span class="site-name">CC的部落格</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-book-reader"></i><span> 文章</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fa-solid fa-box-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa-solid fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fa-solid fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-cubes"></i><span> 社交</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/blogroll/"><i class="fa-fw fa-solid fa-link"></i><span> 友链</span></a></li><li><a class="site-page child" href="/moments/"><i class="fa-fw fa-solid fa-blog"></i><span> 友圈</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa-solid fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/essay/"><i class="fa-fw fa-solid fa-comment-alt"></i><span> 短文</span></a></li></ul></div><div class="menus_item"><span class="site-page group"><i class="fa-fw fa-solid fa-desktop"></i><span> 关于</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/sub/"><i class="fa-fw fa-solid fa-bell"></i><span> 订阅</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fa-solid fa-list-check"></i><span> 本站</span></a></li><li><a class="site-page child" href="/privacy-policy/"><i class="fa-fw fa-solid fa-user-secret"></i><span> 隐私</span></a></li><li><a class="site-page child" target="_blank" rel="noopener external nofollow noreferrer" href="https://cc.instatus.com"><i class="fa-fw fa-solid fa-server"></i><span> 状态</span></a></li></ul></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">Hexo Butterfly Algolia 搜索的使用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-05-11T03:00:00.000Z" title="发表于 2021-05-11 11:00:00">2021-05-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-02-16T11:11:40.000Z" title="更新于 2023-02-16 19:11:40">2023-02-16</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>12分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="Hexo Butterfly Algolia 搜索的使用"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><div class="post-ai-description"><div class="ai-title"><i class="fa-solid fa-newspaper"></i><div class="ai-title-text">AI-摘要</div><div id="ai-Toggle" title="CC/Tianli 模式切换">切换</div><i class="fa-solid fa-podcast" title="Tianli 模式下朗读摘要"></i><i class="fa-solid fa-arrow-rotate-right" title="Tianli 模式下刷新摘要"></i><div id="ai-tag">Tianli GPT</div></div><div class="ai-explanation">AI初始化中...</div><div class="ai-btn-box"><div class="ai-btn-item">介绍自己 🙈</div><div class="ai-btn-item">生成摘要 👋</div><div class="ai-btn-item">相关推荐 📖</div><div class="ai-btn-item">前往主页 🏠</div><div class="ai-btn-item" id="go-tianli-blog">前往爱发电购买</div></div><script data-pjax src="/"></script></div><article class="post-content" id="article-container"><p>本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用</p><p>本文首发在<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yuque.com/ccknbc/blog/24/"><strong>语雀</strong></a> 自动同步更新至<a href="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/"><strong>CC 的部落格</strong></a></p><h2 id="注册账号">注册账号<a class="fa-solid fa-hashtag" href="#注册账号"></a></h2><p>前往 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.algolia.com/users/sign_up">Algolia</a> 官网注册一个账号，新建 应用和 index <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791672826-3bac29b1-3f60-4be8-bdc5-7b615e72f78a.png#averageHue=%23e2f9f1&amp;height=721&amp;id=u2756c9ea&amp;originHeight=721&amp;originWidth=1469&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=115021&amp;status=done&amp;style=none&amp;title=&amp;width=1469" alt="image.png" loading="lazy"> 数据中心建议选择新加坡或香港，当然根据你自己情况而定 <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791714386-d2a2ac19-edfd-4c8b-ab02-9de7b770ff21.png#averageHue=%23f5f5fa&amp;height=771&amp;id=uce195a9b&amp;originHeight=771&amp;originWidth=1204&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=116921&amp;status=done&amp;style=none&amp;title=&amp;width=1204" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791516501-3f36941d-cf13-49aa-bdb4-e956f632283a.png#averageHue=%23e8e9f6&amp;height=447&amp;id=u8c5cd22c&amp;originHeight=447&amp;originWidth=799&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=23823&amp;status=done&amp;style=none&amp;title=&amp;width=799" alt="image.png" loading="lazy"></p><h2 id="安装插件">安装插件<a class="fa-solid fa-hashtag" href="#安装插件"></a></h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-algolia --save</span><br><span class="line">npm install hexo-algoliasearch --save</span><br></pre></td></tr></table></figure><p>分别是 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/oncletom/hexo-algolia">hexo-algolia</a> 和 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>，他们的介绍分别为</p><blockquote><p>Index your hexo website content to Algolia Search.<br>🔎 A plugin to index posts of your Hexo blog on Algolia</p></blockquote><p>也就很明显了，如果你想要全站搜索可选择前者，如果你只想搜索文章两者兼可。但前者不能将文章内容作为索引上传（其实老版本是支持的，但因为索引大小限制，在新版本取消索引了文章内容），后者目前仍可全文上传。然后就是 HEXO 配置文件中添加以下内容，下文基本以 <code>hexo-algoliasearch</code> 为例，因为我个人认为访客只会搜文章吧（事实上是搜索根本没人用，毕竟也根本没人访问），hexo-algolia 可查看官方文档，注意配置和命令的区别</p><blockquote><p>_config.yml :</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">algolia:</span></span><br><span class="line">  <span class="attr">appId:</span> <span class="string">&quot;Z7A3XW4R2I&quot;</span></span><br><span class="line">  <span class="attr">apiKey:</span> <span class="string">&quot;12db1ad54372045549ef465881c17e743&quot;</span></span><br><span class="line">  <span class="attr">adminApiKey:</span> <span class="string">&quot;40321c7c207e7f73b63a19aa24c4761b&quot;</span></span><br><span class="line">  <span class="attr">chunkSize:</span> <span class="number">5000</span></span><br><span class="line">  <span class="attr">indexName:</span> <span class="string">&quot;my-hexo-blog&quot;</span></span><br><span class="line">  <span class="attr">fields:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">content:strip:truncate,0,500</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">excerpt:strip</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">gallery</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">permalink</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">photos</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">slug</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">title</span></span><br></pre></td></tr></table></figure><p>为了保险，识别到插件，还可以加入以下内容</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">hexo-algoliasearch</span></span><br></pre></td></tr></table></figure><p>去主题配置文件打开 Algolia 搜索，记得关闭本地搜索，二者只能取其一！</p><blockquote><p>_config.butterfly.yml :</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Algolia search</span></span><br><span class="line"><span class="attr">algolia_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hits:</span></span><br><span class="line">    <span class="attr">per_page:</span> <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Local search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>然后来看以下具体的参数配置获取方式<code>appId</code>，<code>apiKey</code>，<code>adminApiKey</code>可在 API Keys 页面获取，注意保管好你的 Admin Key，不要让其他人知道，不建议直接写在配置中<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620789827112-9247b7ae-f3c9-4807-93cd-46c2b8dbb2bc.png#averageHue=%23bdceb8&amp;height=707&amp;id=u63248bc0&amp;originHeight=707&amp;originWidth=1900&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=115433&amp;status=done&amp;style=none&amp;title=&amp;width=1900" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.jsdelivr.net/gh/oncletom/hexo-algolia@main/algolia-write-key.png#id=E3NUV&amp;originHeight=1172&amp;originWidth=1176&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;status=done&amp;style=none&amp;title=" alt="" loading="lazy"> 对于 Windows 系统，如果你不想每次都进行设定变量操作，可以添加<code>ALGOLIA_ADMIN_API_KEY</code>到系统的环境变量中<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620789745876-cbf0d411-f694-45c7-bcbd-c0987f71f718.png#averageHue=%23efeeee&amp;height=217&amp;id=ub7f3b987&amp;originHeight=217&amp;originWidth=839&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=13413&amp;status=done&amp;style=none&amp;title=&amp;width=839" alt="image.png" loading="lazy"> 而 hexo-algolia 插件环境变量名称为 <code>HEXO_ALGOLIA_INDEXING_KEY</code> 注意根据对应的文档更改，当然也可以使用命令行工具</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Windows</span></span><br><span class="line"><span class="comment">## 微软的 powershell)</span></span><br><span class="line"><span class="variable">$env</span>:ALGOLIA_ADMIN_API_KEY = <span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">## cmd</span></span><br><span class="line">建议不用 cmd，正经人不用 cmd</span><br><span class="line"></span><br><span class="line"><span class="comment"># Linux</span></span><br><span class="line"><span class="comment">## sh/bash</span></span><br><span class="line"><span class="built_in">export</span> ALGOLIA_ADMIN_API_KEY=</span><br><span class="line"></span><br><span class="line"><span class="comment">## fish</span></span><br><span class="line"><span class="built_in">set</span> -xg ALGOLIA_ADMIN_API_KEY <span class="string">&quot;&quot;</span></span><br></pre></td></tr></table></figure><p>如果你和我一样使用的自动部署，例如 Github Actions，你可以在工作流中一开始或者对应的步骤添加环境变量，记得 Secrets 中也要添加哦</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">jobs:</span></span><br><span class="line">  <span class="attr">deploy:</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">Hexo</span> <span class="string">Public</span> <span class="string">To</span> <span class="string">Pages</span></span><br><span class="line">    <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line">    <span class="attr">env:</span></span><br><span class="line">      <span class="attr">TZ:</span> <span class="string">Asia/Shanghai</span></span><br><span class="line">      <span class="attr">ALGOLIA_ADMIN_API_KEY:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.ALGOLIA_ADMIN_API_KEY</span> <span class="string">&#125;&#125;</span></span><br></pre></td></tr></table></figure><p>或者使用</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> ALGOLIA_ADMIN_API_KEY=…</span><br><span class="line"><span class="built_in">export</span> HEXO_ALGOLIA_INDEXING_KEY=…</span><br></pre></td></tr></table></figure><p><code>indexName</code> 即你开始新建的索引名称<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620790208902-1a6311bf-bd58-4889-9261-f2b6dd4d779e.png#averageHue=%23eaebef&amp;height=64&amp;id=u57f4c82d&amp;originHeight=64&amp;originWidth=379&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=5668&amp;status=done&amp;style=none&amp;title=&amp;width=379" alt="image.png" loading="lazy"> 其他内容保持默认即可，但对于<code>fields</code></p><h3 id="配置示例">配置示例<a class="fa-solid fa-hashtag" href="#配置示例"></a></h3><p>这里选择不截取上传全文，并且删除 html 标签，只留下有用的搜索内容</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fields:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">content:strip</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">excerpt:strip</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">gallery</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">permalink</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">photos</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">slug</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">title</span></span><br></pre></td></tr></table></figure><p>但对于博客来说，没人会按照 tags photos（或者 cover）来搜索吧，所以有些内容不必要上传，并如果你和我一样有多个镜像站，在不改源码（algolia.js）的情况下，不会使用 permalink 而使用 path（改源码可以使用 slug，但没必要），并且只留下必要的内容，如下所示：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">algolia:</span></span><br><span class="line">  <span class="attr">appId:</span> <span class="string">&quot;947RX7HP3E&quot;</span></span><br><span class="line">  <span class="attr">apiKey:</span> <span class="string">&quot;9114b3fa2a3307b2cc8eec7e3ae5a8ea&quot;</span></span><br><span class="line">  <span class="attr">chunkSize:</span> <span class="number">5000</span></span><br><span class="line">  <span class="attr">indexName:</span> <span class="string">&quot;ccknbc-blog&quot;</span></span><br><span class="line">  <span class="attr">fields:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">path</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">title</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">content:strip</span></span><br></pre></td></tr></table></figure><p>这样有了标题，全文内容，路径即可在不同镜像站找到对应的页面，而不是跳到主站，当然你选择跳到主站无可厚非。</p><h2 id="使用命令">使用命令<a class="fa-solid fa-hashtag" href="#使用命令"></a></h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">hexo algolia</span><br><span class="line">而在这之前还需要hexo g生成文件</span><br><span class="line">所以具体使用命令就是</span><br><span class="line">hexo cl &amp;&amp; hexo g &amp;&amp; hexo algolia</span><br><span class="line">或者在未安装 HEXO CLI 的情况下使用以下命令</span><br><span class="line">npm run clean &amp;&amp; npm run build &amp;&amp; hexo algolia -n &amp;&amp; gulp</span><br></pre></td></tr></table></figure><h3 id="可选配置">可选配置<a class="fa-solid fa-hashtag" href="#可选配置"></a></h3><p>是否删除之前建立好的索引重新建立索引？</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo algolia -n</span><br><span class="line">或者</span><br><span class="line">hexo algolia --no-clear</span><br></pre></td></tr></table></figure><p>注意查看命令行输出信息，然后去官网检查索引是否生成<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792250950-8c6c2e31-a5f4-41d3-8526-c101b88ca2f0.png#averageHue=%23bad8e7&amp;height=676&amp;id=u0aaf2648&amp;originHeight=676&amp;originWidth=1865&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=125864&amp;status=done&amp;style=none&amp;title=&amp;width=1865" alt="image.png" loading="lazy"> 事实上到这里已经可以获得下图所示的搜索效果（这是冰老师博客的效果，它使用的是 hexo-algolia，毕竟有关于我界面） <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623297781030-708a3fa6-a56d-4fe0-bb45-5c3bb9081eba.png#averageHue=%23f3f6f9&amp;clientId=uc24fb27d-4fc5-4&amp;from=paste&amp;id=udc02fc71&amp;originHeight=508&amp;originWidth=751&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=35158&amp;status=done&amp;style=none&amp;taskId=u0178d8fc-c514-4ab9-9efb-12d94a7bcc6&amp;title=" alt="image.png" loading="lazy"></p><h2 id="Algolia-配置">Algolia 配置<a class="fa-solid fa-hashtag" href="#Algolia-配置"></a></h2><p>这里不细节讲，你可以查阅<a target="_blank" rel="noopener external nofollow noreferrer" href="https://community.algolia.com/instantsearch.js/v2/getting-started.html">官方文档</a>，虽然有些过时的参数，但结合 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-from-v2-to-v3">Upgrade from v2 to v3</a> 还是勉强能用，蝴蝶已经做好了高亮标题，虽然会查询文章内容，但并不会高亮文章内容节选，我们要做的就是修改部分 js 内容，并对应的设置好 Algolia，以便按照我们要求的优先顺序展示搜索结果，而不是默认的很奇怪的排序，毕竟针对中文分词他是一个一个分不能按照英语那样，针对英文我们可以开启分词查询，驼峰查找而不是盲目的匹配整个单词，并且允许拼错字母或汉字的情况存在，这些都是一个搜索系统要考虑的问题。然后针对搜索速度，我们可以对文章内容进行切片或者属性的刻画，但 V2 所支持的功能实在太少，派的上用场的大概就是 匹配的字词内容，匹配度，匹配内容的摘录（默认 10 个字词），还有高级搜索用法的启用。 <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792329244-9538543c-aafa-4a2a-a13b-a856839d99b4.png#averageHue=%23fafafc&amp;height=490&amp;id=u96dacffc&amp;originHeight=490&amp;originWidth=1526&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=53168&amp;status=done&amp;style=none&amp;title=&amp;width=1526" alt="image.png" loading="lazy"></p><p><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792359705-aca4db80-07ec-41b5-ba89-3e398e4832c3.png#averageHue=%23fefefe&amp;height=286&amp;id=u1d01bcee&amp;originHeight=572&amp;originWidth=1520&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=75266&amp;status=done&amp;style=none&amp;title=&amp;width=760" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792403427-919eeaf3-beee-43b8-ba15-33d179fb7483.png#averageHue=%23fefefe&amp;height=390&amp;id=ua294bd74&amp;originHeight=780&amp;originWidth=1510&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=98311&amp;status=done&amp;style=none&amp;title=&amp;width=755" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792429374-c10f685c-42df-4b2f-8112-b63b811686f5.png#averageHue=%23fefefe&amp;height=815&amp;id=u8c98eecf&amp;originHeight=815&amp;originWidth=1524&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=88864&amp;status=done&amp;style=none&amp;title=&amp;width=1524" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792467160-7192cedf-ad20-4fd0-bcb2-4f7557fc904d.png#averageHue=%23fefefe&amp;height=567&amp;id=u6ca53735&amp;originHeight=567&amp;originWidth=1515&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=65520&amp;status=done&amp;style=none&amp;title=&amp;width=1515" alt="image.png" loading="lazy"> <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792523507-460b449b-cd80-4efc-897b-898aa544d09a.png#averageHue=%23fefefe&amp;height=592&amp;id=u28791a5d&amp;originHeight=1183&amp;originWidth=1537&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=130557&amp;status=done&amp;style=none&amp;title=&amp;width=768.5" alt="image.png" loading="lazy"><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792559182-d559fb1a-94e4-49ad-a13a-f9848fa7f784.png#averageHue=%23fefefe&amp;height=363&amp;id=u5d9546e2&amp;originHeight=725&amp;originWidth=1511&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=75980&amp;status=done&amp;style=none&amp;title=&amp;width=755.5" alt="image.png" loading="lazy"><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792603109-0c127f51-0fd2-4f86-9290-1f25cf7b4deb.png#averageHue=%23fefefe&amp;height=358&amp;id=u1977ad48&amp;originHeight=358&amp;originWidth=999&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=26859&amp;status=done&amp;style=none&amp;title=&amp;width=999" alt="image.png" loading="lazy"><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792626661-af14bf9c-6dfb-4306-beaf-d4153095ffbf.png#averageHue=%23fefefe&amp;height=444&amp;id=uf6f4182f&amp;originHeight=444&amp;originWidth=997&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=27018&amp;status=done&amp;style=none&amp;title=&amp;width=997" alt="image.png" loading="lazy"><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792659190-7a5767d3-64f9-4f57-a247-1bbe65f45da5.png#averageHue=%23fefefe&amp;height=196&amp;id=u51baa85f&amp;originHeight=196&amp;originWidth=976&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=17315&amp;status=done&amp;style=none&amp;title=&amp;width=976" alt="image.png" loading="lazy"></p><h2 id="JS-修改">JS 修改<a class="fa-solid fa-hashtag" href="#JS-修改"></a></h2><h3 id="主题-4-0-0-以下版本">主题 4.0.0 以下版本<a class="fa-solid fa-hashtag" href="#主题-4-0-0-以下版本"></a></h3><p>到这里还没有结束，如果你这样操作就会有一个问题，假设你的访问流量很大，有很多人用搜索功能，那么免费的 1 万次搜索额度可能不够一个月的使用，需要按下<code>ENTER</code>键再执行搜索而不是实时搜索，因此可以稍作修改（blog\themes\butterfly\source\js\search\algolia.js) js 的部分内容，不想动源码的可以保存到其他与主题不冲突的路径，然后更换 CDN 地址即可主要修改以下内容，然后就是排版问题改了改位置，不喜欢的可以不改，很直白就不用过多解释了，这样就可获得和本博客一样的搜索效果了</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">  search.addWidget(</span><br><span class="line">    instantsearch.widgets.searchBox(&#123;</span><br><span class="line">      container: &#x27;#algolia-search-input&#x27;,</span><br><span class="line">      reset: false,</span><br><span class="line">      magnifier: false,</span><br><span class="line"><span class="addition">+      searchOnEnterKeyPressOnly: true,</span></span><br><span class="line">      placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder</span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">  search.addWidget(</span><br><span class="line">    instantsearch.widgets.hits(&#123;</span><br><span class="line">      container: &#x27;#algolia-hits&#x27;,</span><br><span class="line">      templates: &#123;</span><br><span class="line">        item: function (data) &#123;</span><br><span class="line">          const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)</span><br><span class="line">          return (</span><br><span class="line">            &#x27;&lt;a href=&quot;&#x27; + link + &#x27;&quot; class=&quot;algolia-hit-item-link&quot;&gt;&lt;b&gt;&#x27; +</span><br><span class="line">            data._highlightResult.title.value + &#x27;&lt;/b&gt;&lt;br&gt;&#x27;</span><br><span class="line"><span class="addition">+            + data._snippetResult.contentStrip.value + &#x27;&lt;br&gt;( 匹配字词 : &#x27;</span></span><br><span class="line"><span class="addition">+            + data._highlightResult.contentStrip.matchedWords + &#x27; ) | ( 匹配等级 : &#x27;</span></span><br><span class="line"><span class="addition">+            + data._highlightResult.contentStrip.matchLevel + &#x27; )&lt;/a&gt;&#x27;</span></span><br><span class="line">          )</span><br><span class="line">        &#125;,</span><br></pre></td></tr></table></figure><h3 id="主题-4-0-0-以上版本">主题 4.0.0 以上版本<a class="fa-solid fa-hashtag" href="#主题-4-0-0-以上版本"></a></h3><p>已经升级到 V4 版本，那么一些特性就可以使用了，修改内容其实差不多，只是建议对于第 87 行的页数限制，主要是为了手机上排版美观，不会转到下一行，但是这样会有一个问题，如果结果超过 5 页，那么将无法显示，最后一页代表第 5 页，所以我个人会选择删掉这个参数限制，同时合并删除了部分代码，以及使用 widget 的 powerby 组件而不是官方的 svg 代码解决方案。另外因为新版官方的每次访问网站都会有一次全局请求，这在消耗免费额度的同时，也影响网站加载的速度，所以修改默认行为为按下回车后再请求同样的部分参数发生了改变（L55-59），可以自行比对或查看<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/"><strong>官方文档</strong></a>，也可以直接<a target="_blank" rel="noopener external nofollow noreferrer" href="https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io/js/search/algolia.js"><strong>引用我的</strong></a></p><p><strong>特别提一嘴</strong> <strong>官方切片方式对我来说 140 个字太长了，所以如果可以接受就用官方的，不用做其他更改，但想要和我的显示方式一样，就注意配置好切片，默认是 10 个词符，毕竟有现成的切片高亮处理可以用，就没必要再来一次了</strong></p><p><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1669548282470-47f14d26-cf31-4b01-8890-5946f68c699e.png#averageHue=%23fefefe&amp;clientId=ued74b2b9-3a9c-4&amp;from=paste&amp;height=1202&amp;id=u32ebaced&amp;originHeight=1502&amp;originWidth=1918&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=143892&amp;status=done&amp;style=none&amp;taskId=u8901c9ce-eae5-4860-bc2a-9aefe3102df&amp;title=&amp;width=1534.4" alt="image.png" loading="lazy"> 另外，新版浏览器支持搜索并定位高亮处理，所以对跳转链接也做了处理，算是弥补了一点不能精准定位的缺陷，比如点击如下链接它会跳转到搜索结果对应的位置，至于前后匹配多少字符你们自行修改，但也是处于不太好用的状态，毕竟是分片还是有点奇怪，对英文来说应该是单词识别，只是中文恰巧是另一标准，单字变成了词</p><p><a href="/posts/how-to-ask-questions-the-smart-way/#:~:text=%E5%8B%BF%E6%BB%A5%E7%94%A8-,%E8%A1%A8%E6%83%85,-%E7%AC%A6%E5%8F%B7%E5%92%8C">#:~:text=勿滥用-,表情,-符号和</a></p><p><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1669550104799-99697278-0900-4dca-aa04-65a5a2536c1d.png#averageHue=%23242322&amp;clientId=ud07bf8a0-f34e-4&amp;from=paste&amp;height=718&amp;id=uee396e9f&amp;originHeight=898&amp;originWidth=1348&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=149894&amp;status=done&amp;style=none&amp;taskId=ua07a641e-1673-4136-8536-b373abc53e2&amp;title=&amp;width=1078.4" alt="image.png" loading="lazy"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="comment"># search</span></span><br><span class="line">  <span class="attr">algolia_js:</span> <span class="string">https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io/js/search/algolia.js</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;load&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">openSearch</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> bodyStyle = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>;</span><br><span class="line">    bodyStyle.<span class="property">width</span> = <span class="string">&quot;100%&quot;</span>;</span><br><span class="line">    bodyStyle.<span class="property">overflow</span> = <span class="string">&quot;hidden&quot;</span>;</span><br><span class="line">    btf.<span class="title function_">animateIn</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;search-mask&quot;</span>), <span class="string">&quot;to_show 0.5s&quot;</span>);</span><br><span class="line">    btf.<span class="title function_">animateIn</span>(</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#algolia-search .search-dialog&quot;</span>),</span><br><span class="line">      <span class="string">&quot;titleScale 0.5s&quot;</span></span><br><span class="line">    );</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#algolia-search .ais-SearchBox-input&quot;</span>).<span class="title function_">focus</span>();</span><br><span class="line">    &#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// shortcut: ESC</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;keydown&quot;</span>, <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params">event</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (event.<span class="property">code</span> === <span class="string">&quot;Escape&quot;</span>) &#123;</span><br><span class="line">        <span class="title function_">closeSearch</span>();</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">&quot;keydown&quot;</span>, f);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">closeSearch</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> bodyStyle = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>;</span><br><span class="line">    bodyStyle.<span class="property">width</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    bodyStyle.<span class="property">overflow</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    btf.<span class="title function_">animateOut</span>(</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#algolia-search .search-dialog&quot;</span>),</span><br><span class="line">      <span class="string">&quot;search_close .5s&quot;</span></span><br><span class="line">    );</span><br><span class="line">    btf.<span class="title function_">animateOut</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;search-mask&quot;</span>), <span class="string">&quot;to_hide 0.5s&quot;</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">searchClickFn</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">document</span></span><br><span class="line">      .<span class="title function_">querySelector</span>(<span class="string">&quot;#search-button &gt; .search&quot;</span>)</span><br><span class="line">      .<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, openSearch);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">searchClickFnOnce</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    <span class="variable language_">document</span></span><br><span class="line">      .<span class="title function_">getElementById</span>(<span class="string">&quot;search-mask&quot;</span>)</span><br><span class="line">      .<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closeSearch);</span><br><span class="line">    <span class="variable language_">document</span></span><br><span class="line">      .<span class="title function_">querySelector</span>(<span class="string">&quot;#algolia-search .search-close-button&quot;</span>)</span><br><span class="line">      .<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, closeSearch);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> algolia = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>;</span><br><span class="line">  <span class="keyword">const</span> isAlgoliaValid = algolia.<span class="property">appId</span> &amp;&amp; algolia.<span class="property">apiKey</span> &amp;&amp; algolia.<span class="property">indexName</span>;</span><br><span class="line">  <span class="keyword">if</span> (!isAlgoliaValid) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&quot;Algolia setting is invalid!&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> search = <span class="title function_">instantsearch</span>(&#123;</span><br><span class="line">    <span class="attr">indexName</span>: algolia.<span class="property">indexName</span>,</span><br><span class="line">    <span class="attr">searchClient</span>: <span class="title function_">algoliasearch</span>(algolia.<span class="property">appId</span>, algolia.<span class="property">apiKey</span>),</span><br><span class="line">    <span class="title function_">searchFunction</span>(<span class="params">helper</span>) &#123;</span><br><span class="line">      helper.<span class="property">state</span>.<span class="property">query</span> &amp;&amp; helper.<span class="title function_">search</span>();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> configure = instantsearch.<span class="property">widgets</span>.<span class="title function_">configure</span>(&#123;</span><br><span class="line">    <span class="attr">hitsPerPage</span>: algolia.<span class="property">per_page</span> || <span class="number">5</span>,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> searchBox = instantsearch.<span class="property">widgets</span>.<span class="title function_">searchBox</span>(&#123;</span><br><span class="line">    <span class="attr">container</span>: <span class="string">&quot;#algolia-search-input&quot;</span>,</span><br><span class="line">    <span class="attr">showReset</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">showSubmit</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">searchAsYouType</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">placeholder</span>: <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">input_placeholder</span>,</span><br><span class="line">    <span class="attr">showLoadingIndicator</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> hits = instantsearch.<span class="property">widgets</span>.<span class="title function_">hits</span>(&#123;</span><br><span class="line">    <span class="attr">container</span>: <span class="string">&quot;#algolia-hits&quot;</span>,</span><br><span class="line">    <span class="attr">templates</span>: &#123;</span><br><span class="line">      <span class="title function_">item</span>(<span class="params">data</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> link = data.<span class="property">permalink</span></span><br><span class="line">          ? data.<span class="property">permalink</span></span><br><span class="line">          : <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">root</span> + data.<span class="property">path</span>;</span><br><span class="line">        <span class="keyword">const</span> content = data.<span class="property">_snippetResult</span>.<span class="property">contentStrip</span>.<span class="property">value</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string">          &lt;a href=&quot;<span class="subst">$&#123;link&#125;</span>#:~:text=<span class="subst">$&#123;content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;mark&gt;&quot;</span>) - <span class="number">3</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;mark&gt;&quot;</span>)</span></span></span><br><span class="line"><span class="subst"><span class="string">        )&#125;</span>-,<span class="subst">$&#123;content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;mark&gt;&quot;</span>) + <span class="number">6</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;/mark&gt;&quot;</span>)</span></span></span><br><span class="line"><span class="subst"><span class="string">        )&#125;</span>,-<span class="subst">$&#123;content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;/mark&gt;&quot;</span>) + <span class="number">7</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string">          content.indexOf(<span class="string">&quot;&lt;/mark&gt;&quot;</span>) + <span class="number">10</span></span></span></span><br><span class="line"><span class="subst"><span class="string">        )&#125;</span>&quot; class=&quot;algolia-hit-item-link&quot;&gt;</span></span><br><span class="line"><span class="string">          &lt;b&gt;<span class="subst">$&#123;data._highlightResult.title.value || <span class="string">&quot;no-title&quot;</span>&#125;</span>&lt;/b&gt;</span></span><br><span class="line"><span class="string">          &lt;br&gt;<span class="subst">$&#123;content&#125;</span>&lt;/br&gt;</span></span><br><span class="line"><span class="string">          匹配字词: &lt;em&gt;&lt;mark&gt;<span class="subst">$&#123;</span></span></span><br><span class="line"><span class="subst"><span class="string">            data._highlightResult.contentStrip.matchedWords</span></span></span><br><span class="line"><span class="subst"><span class="string">          &#125;</span>&lt;/mark&gt;&lt;/em&gt; | 匹配等级: &lt;em&gt;&lt;mark&gt;<span class="subst">$&#123;</span></span></span><br><span class="line"><span class="subst"><span class="string">          data._highlightResult.contentStrip.matchLevel</span></span></span><br><span class="line"><span class="subst"><span class="string">        &#125;</span>&lt;/mark&gt;&lt;/em&gt;</span></span><br><span class="line"><span class="string">          &lt;/a&gt;`</span>;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">empty</span>: <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">          <span class="string">&#x27;&lt;div id=&quot;algolia-hits-empty&quot;&gt;&#x27;</span> +</span><br><span class="line">          <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">hits_empty</span>.<span class="title function_">replace</span>(</span><br><span class="line">            <span class="regexp">/\$\&#123;query&#125;/</span>,</span><br><span class="line">            data.<span class="property">query</span></span><br><span class="line">          ) +</span><br><span class="line">          <span class="string">&quot;&lt;/div&gt;&quot;</span></span><br><span class="line">        );</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> stats = instantsearch.<span class="property">widgets</span>.<span class="title function_">stats</span>(&#123;</span><br><span class="line">    <span class="attr">container</span>: <span class="string">&quot;#algolia-info &gt; .algolia-stats&quot;</span>,</span><br><span class="line">    <span class="attr">templates</span>: &#123;</span><br><span class="line">      <span class="attr">text</span>: <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> stats = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">hits_stats</span></span><br><span class="line">          .<span class="title function_">replace</span>(<span class="regexp">/\$\&#123;hits&#125;/</span>, data.<span class="property">nbHits</span>)</span><br><span class="line">          .<span class="title function_">replace</span>(<span class="regexp">/\$\&#123;time&#125;/</span>, data.<span class="property">processingTimeMS</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="string">`&lt;hr&gt;<span class="subst">$&#123;stats&#125;</span>`</span>;</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> powerBy = instantsearch.<span class="property">widgets</span>.<span class="title function_">poweredBy</span>(&#123;</span><br><span class="line">    <span class="attr">container</span>: <span class="string">&quot;#algolia-info &gt; .algolia-poweredBy&quot;</span>,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> pagination = instantsearch.<span class="property">widgets</span>.<span class="title function_">pagination</span>(&#123;</span><br><span class="line">    <span class="attr">container</span>: <span class="string">&quot;#algolia-pagination&quot;</span>,</span><br><span class="line">    <span class="attr">totalPages</span>: algolia.<span class="property">totalPages</span>,</span><br><span class="line">    <span class="attr">templates</span>: &#123;</span><br><span class="line">      <span class="attr">first</span>: <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-angle-double-left&quot; title=&quot;第一页&quot;&gt;&lt;/i&gt;&#x27;</span>,</span><br><span class="line">      <span class="attr">last</span>: <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-angle-double-right&quot; title=&quot;最后一页&quot;&gt;&lt;/i&gt;&#x27;</span>,</span><br><span class="line">      <span class="attr">previous</span>: <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-angle-left&quot; title=&quot;上一页&quot;&gt;&lt;/i&gt;&#x27;</span>,</span><br><span class="line">      <span class="attr">next</span>: <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-angle-right&quot; title=&quot;下一页&quot;&gt;&lt;/i&gt;&#x27;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  search.<span class="title function_">addWidgets</span>([configure, searchBox, hits, stats, powerBy, pagination]); <span class="comment">// add the widgets to the instantsearch instance</span></span><br><span class="line"></span><br><span class="line">  search.<span class="title function_">start</span>();</span><br><span class="line"></span><br><span class="line">  <span class="title function_">searchClickFn</span>();</span><br><span class="line">  <span class="title function_">searchClickFnOnce</span>();</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;pjax:complete&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">getComputedStyle</span>(<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#algolia-search .search-dialog&quot;</span>))</span><br><span class="line">      .<span class="property">display</span> === <span class="string">&quot;block&quot;</span> &amp;&amp; <span class="title function_">closeSearch</span>();</span><br><span class="line">    <span class="title function_">searchClickFn</span>();</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">pjax</span> &amp;&amp;</span><br><span class="line">    search.<span class="title function_">on</span>(<span class="string">&quot;render&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="property">pjax</span>.<span class="title function_">refresh</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;algolia-hits&quot;</span>));</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h2 id="效果预览">效果预览<a class="fa-solid fa-hashtag" href="#效果预览"></a></h2><p><img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623297948979-16f7476e-0978-49ee-a667-2dc060896c88.png#averageHue=%23f2f5f8&amp;clientId=uc24fb27d-4fc5-4&amp;from=paste&amp;id=ud3ca95b0&amp;originHeight=413&amp;originWidth=753&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=40542&amp;status=done&amp;style=none&amp;taskId=u9d85e4b7-062e-432f-b6d8-854d2e5d2eb&amp;title=" alt="image.png" loading="lazy"> （这个是因为我修改了源码，实际上也能通过修改 JS 实现，但大多数人不会关心这些搜索小贴士）<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298049726-3cded22e-2e40-44b3-a445-d542b3bc3c80.png#averageHue=%23f2f5f9&amp;clientId=uc24fb27d-4fc5-4&amp;from=paste&amp;id=u13b48f0e&amp;originHeight=601&amp;originWidth=750&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=61545&amp;status=done&amp;style=none&amp;taskId=ua59892ff-66db-45b5-a905-ac97bcb7b4d&amp;title=" alt="image.png" loading="lazy"> 对于中文它当作单字匹配<img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298062241-b4dd37f7-aa87-485f-a394-950943e0c211.png#averageHue=%23f3f6f9&amp;clientId=uc24fb27d-4fc5-4&amp;from=paste&amp;id=u8d3029fa&amp;originHeight=498&amp;originWidth=752&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=40466&amp;status=done&amp;style=none&amp;taskId=uca3eae79-9718-4088-8c72-c34e98f6782&amp;title=" alt="image.png" loading="lazy"> 允许拼写错误 <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298137784-eb2713f9-377f-4f5d-824d-a7a7b7a881c4.png#averageHue=%23f3f6f9&amp;clientId=uc24fb27d-4fc5-4&amp;from=paste&amp;id=uc7968f09&amp;originHeight=598&amp;originWidth=750&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=61697&amp;status=done&amp;style=none&amp;taskId=u9c8b459e-8141-46ef-9d7e-11bd8cc917f&amp;title=" alt="image.png" loading="lazy"></p><h2 id="特别说明">特别说明<a class="fa-solid fa-hashtag" href="#特别说明"></a></h2><p>因两个月前已申请通过，本博客已切换至不限搜索次数的<a target="_blank" rel="noopener external nofollow noreferrer" href="https://docsearch.algolia.com/"><strong>DocSearch</strong></a>！同时也加入了<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.algolia.com/for-open-source/"><strong>开源计划</strong></a>，但因为 10DSN 太香了，虽然 instantsearch 可玩性更好，但我也只申请了 200k/月的额度（虽然可以增加），所以为了即时搜索我还是选择了白嫖，而且设定为每天自动爬取的话，省去了生成索引上传的这一步骤，节省了自动部署的时间。而且爬取到数据后，前端我并非一定要使用 docsearch 方案，用 instantsearch 配合其他插件也不是不可以。 <img src= "" data-lazy-src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1676545133728-0a8f5c54-05e9-422c-b427-21087c6b0372.png#averageHue=%23f6f6d9&amp;clientId=udb920223-80c3-4&amp;from=paste&amp;height=214&amp;id=u36c9a03d&amp;originHeight=267&amp;originWidth=1762&amp;originalType=binary&amp;ratio=1.25&amp;rotation=0&amp;showTitle=false&amp;size=27690&amp;status=done&amp;style=none&amp;taskId=uf09c1846-dc8c-444d-8cf5-a72ad68c85a&amp;title=&amp;width=1409.6" alt="image.png" loading="lazy"></p></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/">CC康纳百川</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/">https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><i style="color:#8fbc8f" class="fa-brands fa-creative-commons"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-by"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-nc"></i> <i style="color:#8fbc8f" class="fa-brands fa-creative-commons-sa"></i> CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.ccknbc.cc">CC的部落格</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%B7%A5%E5%85%B7/">工具</a></div><div class="post_share"><div class="social-share" data-image="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/c9dcd19b9621a425f914ffb64cf2f8c1_w1920_h1080_s281.jpg" data-sites="wechat,weibo,qq,facebook,twitter"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://jsd.cdn.zzko.cn/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i>赞赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://www.rocschool.com/tool/qr/qr/id/51.html" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/qr.png" alt="三合一"></a><div class="post-qr-code-desc">三合一</div></li><li class="reward-item"><a href="https://afdian.net/@ccknbc" rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/afdian.png" alt="爱发电"></a><div class="post-qr-code-desc">爱发电</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/awesome-status-pages/" title="很棒的状态页面"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/bef56211c33f87dc3435e8362e79befd_w1920_h1080_s1024.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">很棒的状态页面</div></div></a></div><div class="next-post pull-right"><a href="/posts/cusdis-or-disqus/" title="Cusdis 还是 Disqus ？"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/826d1d0e2095fde8cdd3db7dff112b2c_w1920_h1080_s583.jpg" onerror='onerror=null,src="https://jsd.cdn.zzko.cn/npm/hexo-theme-anzhiyu/source/img/friend_404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Cusdis 还是 Disqus ？</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/hexo-webpushr-notification/" title="Hexo浏览器定向推送文章更新"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/d2a947d48815ed24936a919873b97841_w1366_h768_s31.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-05</div><div class="title">Hexo浏览器定向推送文章更新</div></div></a></div><div><a href="/posts/the-real-addthis/" title="你以为 AddThis 只是个分享工具吗？"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/bbf0970587cfd0f4a654efda9c375844_w1920_h1080_s216.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-05-15</div><div class="title">你以为 AddThis 只是个分享工具吗？</div></div></a></div><div><a href="/posts/yuque-to-hexo/" title="语雀文章同步至Hexo笔记"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/721e476cb2661152b9c43621c94e3ed7_w1366_h768_s86.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-04</div><div class="title">语雀文章同步至Hexo笔记</div></div></a></div><div><a href="/posts/2fa-last-security-line/" title="两步验证 最后一道安全防线"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/0d0f43b526a6944a65566a2fd7aa9939_w1920_h1080_s214.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-11-21</div><div class="title">两步验证 最后一道安全防线</div></div></a></div><div><a href="/posts/waline-comments-system-deployment-logs/" title="Waline 评论系统部署日志"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/edd977e4a8569283e89ac7426b67dfc3_w1920_h1080_s366.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-01-17</div><div class="title">Waline 评论系统部署日志</div></div></a></div><div><a href="/posts/implementation-of-simple-browser-update-push/" title="简单浏览器更新推送的实现"><img class="cover" src= "" data-lazy-src="https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/42a535535c03bb6e4e10f2d2501b3e36_w2240_h1260_s2693.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-08-18</div><div class="title">简单浏览器更新推送的实现</div></div></a></div></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="waline-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7"><span class="toc-number">1.</span> <span class="toc-text">注册账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">安装插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E7%A4%BA%E4%BE%8B"><span class="toc-number">2.1.</span> <span class="toc-text">配置示例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="toc-number">3.</span> <span class="toc-text">使用命令</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E9%85%8D%E7%BD%AE"><span class="toc-number">3.1.</span> <span class="toc-text">可选配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Algolia-%E9%85%8D%E7%BD%AE"><span class="toc-number">4.</span> <span class="toc-text">Algolia 配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS-%E4%BF%AE%E6%94%B9"><span class="toc-number">5.</span> <span class="toc-text">JS 修改</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98-4-0-0-%E4%BB%A5%E4%B8%8B%E7%89%88%E6%9C%AC"><span class="toc-number">5.1.</span> <span class="toc-text">主题 4.0.0 以下版本</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98-4-0-0-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC"><span class="toc-number">5.2.</span> <span class="toc-text">主题 4.0.0 以上版本</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%88%E6%9E%9C%E9%A2%84%E8%A7%88"><span class="toc-number">6.</span> <span class="toc-text">效果预览</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E5%88%AB%E8%AF%B4%E6%98%8E"><span class="toc-number">7.</span> <span class="toc-text">特别说明</span></a></li></ol></div></div></div></div></main><footer id="footer" style="background:linear-gradient(135deg,#fff1eb,#ace0f9)"><div id="footer-wrap"><div class="icp"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://beian.miit.gov.cn"><img class="icp-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/icp.png" alt="ICP"><span>鄂 ICP 备 2020019764 号</span></a></div><div class="gongan"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42088102000092"><img class="gongan-icon" src= "" data-lazy-src="https://jsd.cdn.zzko.cn/gh/ccknbc-backup/cdn/logo/gongan.png" alt="gongan"><span>鄂公网安备 42088102000092 号</span></a></div><div class="live"><span>本站已运行</span><span id="display_live"></span><span class="moe-text">CCKNBC All Rights Reserved.</span><script>function blog_live(){window.setTimeout(blog_live,1e3);var e=new Date("2020-06-04T00:00:00"),o=new Date,l=o.getFullYear(),o=o.getTime()-e.getTime(),e=864e5,t=365*e,i=Math.floor(o/t),t=Math.floor(o%t/e),e=Math.floor(o%e/60/60/1e3),a=Math.floor(o%36e5/60/1e3),o=Math.floor(o%6e4/1e3);display_live.innerHTML=" "+i+" 年 "+t+" 天 "+e+" 小时 "+a+" 分 "+o+" 秒<br>&copy; 2020 - "+l+" "}blog_live()</script></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><a class="edit-yuque" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.yuque.com/ccknbc/blog/24/edit/" title="在语雀上以富文本格式编辑/预览 - Hexo Butterfly Algolia 搜索的使用"><i class="fa-solid fa-crow"></i></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fa-solid fa-arrows-alt-h"></i></button><button id="readmode" type="button" title="阅读模式"><i class="fa-solid fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fa-solid fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fa-solid fa-cog"></i></button><button id="share-link" type="button" title="分享链接"><i class="fa-solid fa-share"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fa-solid fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fa-solid fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fa-solid fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://jsd.cdn.zzko.cn/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><script src="https://jsd.cdn.zzko.cn/npm/instant.page/instantpage.js" type="module"></script><script src="https://jsd.cdn.zzko.cn/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://jsd.cdn.zzko.cn/npm/node-snackbar/dist/snackbar.min.js"></script><div class="js-pjax"><script>(()=>{var e=()=>{var e;const t=document.querySelectorAll("#article-container .mermaid-wrap");0!==t.length&&(e=()=>{{var e=t;window.loadMermaid=!0;const a="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach((e,t)=>{const n=e.firstElementChild;e="%%{init:{ 'theme':'"+a+"'}}%%\n"+n.textContent;const d=mermaid.render("mermaid-"+t,e);"string"==typeof d?(t=d,n.insertAdjacentHTML("afterend",t)):d.then(({svg:e})=>{n.insertAdjacentHTML("afterend",e)})})}},btf.addGlobalFn("themeChange",e,"mermaid"),window.loadMermaid?e():btf.getScript("https://jsd.cdn.zzko.cn/npm/mermaid/dist/mermaid.min.js").then(e))};btf.addGlobalFn("encrypt",e,"mermaid"),window.pjax?e():document.addEventListener("DOMContentLoaded",e)})()</script><script>(()=>{let n=window.walineFn||null;const t=e=>{const n=e(Object.assign({el:"#waline-wrap",serverURL:"https://waline.ccknbc.cc",pageview:!1,dark:'html[data-theme="dark"]',path:window.location.pathname,comment:!1,imageUploader:function(e){var n=new FormData,t=new Headers;return n.append("file",e),n.append("album_id","10"),n.append("permission","0"),t.append("Authorization","Bearer 24|o8Crl5y0oK3luyUs17fBxDtAcevk1iiLHVFMNjpA"),t.append("Accept","application/json"),fetch("https://wmimg.com/api/v1/upload",{method:"POST",headers:t,body:n}).then(e=>e.json()).then(e=>e.data.links.url)}},{pageSize:10,meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",copyright:!0,search:!0,turnstileKey:"0x4AAAAAAAECBl27OB5SZrQT",locale:{admin:"博主",sofa:"这里冷冷清清的，快来留下脚印吧！",placeholder:"根据《互联网跟帖评论服务管理规定》，将展示您的归属地，并开启强制注册登录后才允许评论\n社交登录现已支持【QQ Weibo GitHub X Facebook】等平台，登录后可点击头像更改个人主页地址，方便CC串门\n在评论框粘贴图片，自动上传至图床，请不要将评论区作为您的图床，更不要上传违法图片，谢谢合作",reactionTitle:"就现在，表明你的态度！",reaction0:"鼓励",reaction1:"菜狗",reaction2:"正确",reaction3:"错误",reaction4:"思考",reaction5:"无聊",level0:"买菜",level1:"切菜",level2:"炒菜",level3:"煲汤",level4:"煮面",level5:"上桌",level6:"开吃"},emoji:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/"],reaction:["https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/鼓掌.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/菜狗.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/正确.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/错误.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/思考.png","https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/睡觉.png"]}));btf.addGlobalFn("pjax",()=>{n.destroy()},"destroyWaline")};var e=()=>{n?t(n):(btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.css"),btf.getCSS("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline-meta.css").then(()=>import("https://jsd.cdn.zzko.cn/npm/@waline/client/dist/waline.js")).then(({init:e})=>{n=e||Waline.init,t(n),window.walineFn=n}))};btf.loadComment(document.getElementById("waline-wrap"),e)})()</script></div><script>window.addEventListener("load",()=>{const t=e=>e=""!==e&&150<(e=(e=(e=(e=e.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length?e.substring(0,150)+"...":e,a=t=>{let a="";if(t.length)for(let e=0;e<t.length;e++)a=(a+="<div class='aside-list-item'>")+`<div class='content'>
        <a class='comment' href='${t[e].url}' title='${t[e].content}'>${t[e].content}</a>
        <div class='name'><span>${t[e].nick} / </span><time datetime="${t[e].date}">${btf.diffDate(t[e].date,!0)}</time></div>
        </div></div>`;else a+="没有评论";var e=document.querySelector("#card-newest-comments .aside-list");e&&(e.innerHTML=a),window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(e)};var e=()=>{var e;document.querySelector("#card-newest-comments .aside-list")&&((e=btf.saveToLocal.get("waline-newest-comments"))?a(JSON.parse(e)):(async()=>{try{var e=(await(await fetch("https://waline.ccknbc.cc/api/comment?type=recent&count=3",{method:"GET"})).json()).data.map(e=>({content:t(e.comment),avatar:e.avatar,nick:e.nick,url:e.url+"#post-comment",date:e.time||e.insertedAt}));btf.saveToLocal.set("waline-newest-comments",JSON.stringify(e),10/1440),a(e)}catch(e){console.error(e),document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"}})())};e(),btf.addGlobalFn("pjaxComplete",e,"waline_newestComment")})</script><script defer src="/js/custom.js"></script><script src="https://jsd.cdn.zzko.cn/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});const triggerPjaxFn=e=>{e&&Object.values(e).forEach(e=>{e()})};document.addEventListener("pjax:send",function(){btf.removeGlobalFnEvent("pjax"),btf.removeGlobalFnEvent("themeChange");var e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),triggerPjaxFn(window.globalFn.pjaxSend)}),document.addEventListener("pjax:complete",()=>{document.querySelectorAll("script[data-pjax]").forEach(e=>{const t=document.createElement("script");var a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)}),triggerPjaxFn(window.globalFn.pjaxComplete)}),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404")})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="docsearch-wrap"><div id="docsearch" style="display:none"></div><link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/@docsearch/css/dist/style.css"><script src="https://jsd.cdn.zzko.cn/npm/@docsearch/js/dist/umd/index.js"></script><script>(()=>{docsearch(Object.assign({appId:"97MUPN4DMC",apiKey:"a003a39f337f5186ec11f5f92bae62b3",indexName:"ccknbc",container:"#docsearch"},{placeholder:"Ctrl/⌘ + K 唤醒搜索服务",maxResultsPerGroup:7,translations:{button:{buttonText:"搜索",buttonAriaLabel:"搜索"},modal:{searchBox:{resetButtonTitle:"清空",resetButtonAriaLabel:"清空",cancelButtonText:"取消",cancelButtonAriaLabel:"取消"},startScreen:{recentSearchesTitle:"最近搜索历史",noRecentSearchesText:"搜索历史为空",saveRecentSearchButtonTitle:"保存搜索记录",removeRecentSearchButtonTitle:"清除搜索记录",favoriteSearchesTitle:"收藏夹",removeFavoriteSearchButtonTitle:"移出收藏夹"},errorScreen:{titleText:"未能获取搜索结果",helpText:"您可能需要检查您的网络连接"},footer:{selectText:"选择",selectKeyAriaLabel:"回车键",navigateText:"切换",navigateUpKeyAriaLabel:"方向键上",navigateDownKeyAriaLabel:"方向键下",closeText:"关闭",closeKeyAriaLabel:"退出键",searchByText:"搜索服务提供: DocSearch by"},noResultsScreen:{noResultsText:"未搜索到相关内容",suggestedQueryText:"您可尝试搜索",reportMissingResultsText:"确认搜索结果是正确的？",reportMissingResultsLinkText:"反馈给Algolia"}}}}));const e=()=>{document.querySelector(".DocSearch-Button").click()};var t=()=>{btf.addEventListenerPjax(document.querySelector("#search-button > .search"),"click",e)};t(),window.addEventListener("pjax:complete",t)})()</script></div></div><script>const copyright_enable=!0</script><script src="https://jsd.cdn.zzko.cn/npm/turndown/dist/turndown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/copyMarkdown.min.js"></script><script src="https://jsd.cdn.zzko.cn/gh/ccknbc-forked/hexo-butterfly-copymarkdown/lib/reprint.min.js"></script><script>(function (w, d, s, id) {
        if (typeof (w.webpushr) !== 'undefined') return;
        w.webpushr = w.webpushr || function () { (w.webpushr.q = w.webpushr.q || []).push(arguments) };
        var js, fjs = d.getElementsByTagName(s)[0];
        js = d.createElement(s);
        js.id = id;
        js.async = 1;
        js.src = "https://cdn.webpushr.com/app.min.js";
        fjs.parentNode.appendChild(js);
        }(window, document, 'script', 'webpushr-jssdk'));

        webpushr('setup', {
        'key': 'BB9Y-w9p3u0CKA7UP9nupB6I-_NqE2MuODmKJjyC4W2YflX06Ff_hEhrNJfonrut5l6gCa28gC83q2OII7Qv-oA',
        'sw': 'none'
        });
        </script></body></html>